<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">{{ taskInfo.taskName }}</el-col>
      <el-col :span="12"> {{ taskInfo.taskCode }}</el-col>
    </el-row>
    <el-descriptions :column="2" style="margin-top: 30px">
      <el-descriptions-item label="创建人">{{ taskInfo.createBy }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ taskInfo.createTime }}</el-descriptions-item>
      <el-descriptions-item label="任务进度">
        <template>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="taskInfo.progress"
                       status="success"></el-progress>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="合格/计划">{{ taskInfo.quantityQuanlify }}/{{ taskInfo.quantity }}
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <!--        工单信息-->
        <div class="work-info">
          <div class="divider">
            <span class="label">工单信息</span>
          </div>

          <div class="info-container">
            <div class="info-item">
              <span>工单编号</span>
              <span class="content">{{ workorderInfo.workorderCode }}</span>
            </div>
            <div class="info-item">
              <span>工单名称</span>
              <span class="content">{{ workorderInfo.workorderName }}</span>
            </div>
            <div class="info-item">
              <span>产品名称</span>
              <span class="content">{{ workorderInfo.productName }}</span>
            </div>
            <div class="info-item">
              <span>产品编号</span>
              <span class="content">{{ workorderInfo.productCode }}</span>
            </div>
            <div class="info-item">
              <span>规格型号</span>
              <span class="content">{{ workorderInfo.productSpc }}</span>
            </div>
            <div class="info-item">
              <span>单位</span>
              <span class="content">{{ workorderInfo.unitOfMeasure }}</span>
            </div>
            <div class="info-item">
              <span>BOM编号</span>
              <span class="content">{{ workorderInfo.createBy }}</span>
            </div>
            <div class="info-item">
              <span>BOM版本号</span>
              <span class="content">{{ workorderInfo.createBy }}</span>
            </div>
          </div>
        </div>
        <!--        任务信息-->
        <div class="work-info">
          <div class="divider">
            <span class="label">任务信息</span>
          </div>

          <div class="info-container">
            <div class="info-item">
              <span>任务编号</span>
              <span class="content">{{ taskInfo.taskCode }}</span>
            </div>
            <div class="info-item">
              <span>任务名称</span>
              <span class="content">{{ taskInfo.taskName }}</span>
            </div>
            <div class="info-item">
              <span>工作站名称</span>
              <span class="content">{{ taskInfo.workstationName }}</span>
            </div>
            <div class="info-item">
              <span>车间名称</span>
              <span class="content">{{ taskInfo.workshopName }}</span>
            </div>
            <div class="info-item">
              <span>工艺路线</span>
              <span class="content">{{ taskInfo.routeName }}</span>
            </div>
            <div class="info-item">
              <span>工序名称</span>
              <span class="content">{{ taskInfo.processName }}</span>
            </div>
            <div class="info-item">
              <span>工序编号</span>
              <span class="content">{{ taskInfo.processCode }}</span>
            </div>
            <div class="info-item">
              <span>计划数量</span>
              <span class="content">{{ taskInfo.quantity }}</span>
            </div>
            <div class="info-item">
              <span>实际生产数量</span>
              <span class="content">{{ taskInfo.quantityProduced }}</span>
            </div>
            <div class="info-item">
              <span>计划开工时间</span>
              <span class="content">{{ taskInfo.startTime }}</span>
            </div>
            <div class="info-item">
              <span>计划完工时间</span>
              <span class="content">{{ taskInfo.endTime }}</span>
            </div>
            <div class="info-item">
              <span>实际开工时间</span>
              <span class="content">{{ taskInfo.actualStartTime }}</span>
            </div>
            <div class="info-item">
              <span>实际完工时间</span>
              <span class="content">{{ taskInfo.actualEndTime }}</span>
            </div>
            <!--            <div class="info-item">
              <span>班组</span>
              <span class="content">{{ proTask.unit }}</span>
            </div>
            <div class="info-item">
              <span>任务负责人</span>
              <span class="content">{{ proTask.code }}</span>
            </div>-->
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="物料清单" name="second">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleItemIssueOut"
              v-if="this.taskInfo.status==='PROGRESS'"
              v-hasPermi="['mes:wm:issueheader:add']"
            >领料出库
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleRtIssueIn"
              v-if="this.taskInfo.status==='PROGRESS'"
              v-hasPermi="['mes:wm:rtissue:add']"
            >退料入库
            </el-button>
          </el-col>
        </el-row>
        <el-table
          border
          v-loading="false"
          :data="workorderItemList"
          @selection-change="handleItemSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column
            label="物料编码"
            width="120px"
            align="center"
            prop="itemCode"
          />
          <el-table-column
            label="物料名称"
            width="150px"
            align="center"
            prop="itemName"
          />
          <el-table-column label="规格型号" align="center" prop="itemSpc"/>
          <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
          <el-table-column
            label="需求数量"
            width="120px"
            align="center"
            prop="quantity"
          />
          <el-table-column
            label="用料比例"
            width="150px"
            align="center"
            prop="proportional"
          />
          <el-table-column
            label="领料数量"
            align="center"
            prop="llNum"
          />
          <el-table-column label="退料数量" align="center" prop="tlNum"/>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getItemList"
        />
        <!-- 添加生产领料对话框 -->
        <el-dialog title="领料出库" :visible.sync="openItemDialog" width="960px" append-to-body>
          <el-form ref="issueForm" :model="issueForm" :rules="issueFormRules" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料单编号" prop="issueCode">
                  <el-input v-model="issueForm.issueCode" placeholder="请输入领料单编号"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="80">
                  <el-switch v-model="issueAutoGenFlag"
                             active-color="#13ce66"
                             active-text="自动生成"
                             @change="handleAutoGenChangeIssue(issueAutoGenFlag)">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="领料单名称" prop="issueName">
                  <el-input v-model="issueForm.issueName" placeholder="请输入领料单名称"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料任务" prop="taskCode">
                  <el-input v-model="issueForm.taskCode" placeholder="生产任务"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="领料日期" prop="issueDate">
                  <el-date-picker clearable
                                  v-model="issueForm.issueDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择领料日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据状态" prop="status">
                  <el-select v-model="issueForm.status" disabled>
                    <el-option
                      v-for="dict in dict.type.mes_order_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="生产工单" prop="workorderCode">
                  <el-input v-model="issueForm.workorderCode" placeholder="生产工单"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户编号">
                  <el-input v-model="issueForm.clientCode" placeholder="请选择生产工单">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称">
                  <el-input v-model="issueForm.clientName" placeholder="请选择生产工单">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="issueForm.remark" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider content-position="center">物料信息</el-divider>
          <el-card shadow="always" class="box-card">
            <ItemSelectLine ref="line" :issuelineList="this.issuelineList"></ItemSelectLine>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitIssueForm">确 定</el-button>
            <el-button @click="cancelIssue">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog title="退料入库" :visible.sync="openRtIssueDialog" width="960px" append-to-body>
          <el-form ref="rtIssueForm" :model="rtIssueForm" :rules="rtIssueFormRules" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="退料单编号" prop="rtCode">
                  <el-input v-model="rtIssueForm.rtCode" placeholder="请输入退料单编号"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="80">
                  <el-switch v-model="rtIssueAutoGenFlag"
                             active-color="#13ce66"
                             active-text="自动生成"
                             @change="handleRtIssueAutoGenChange(rtIssueAutoGenFlag)">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="退料单名称" prop="rtName">
                  <el-input v-model="rtIssueForm.rtName" placeholder="请输入退料单名称"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="生产工单" prop="workorderCode">
                  <el-input v-model="rtIssueForm.workorderCode" placeholder="请输入生产工单">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产任务">
                  <el-input v-model="rtIssueForm.taskCode" placeholder="请输入生产任务">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退料日期" prop="rtDate">
                  <el-date-picker clearable
                                  v-model="rtIssueForm.rtDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择退料日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="rtIssueForm.remark" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider content-position="center">物料信息</el-divider>
          <el-card shadow="always" class="box-card">
            <Rtissueline :rtIssueLineList="rtIssueLineList"></Rtissueline>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="rtIssueSubmitForm">保 存</el-button>
            <el-button @click="rtIssueCancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="领料记录" name="third">
        <el-table border v-loading="false" :data="issueheaderList">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column label="领料单编号" align="center" width="150px" prop="issueCode">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleView(scope.row)"
                v-hasPermi="['mes:wm:issueheader:query']"
              >{{ scope.row.issueCode }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="领料单名称" align="center" prop="issueName" :show-overflow-tooltip="true"/>
          <el-table-column label="领料日期" align="center" prop="issueDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.issueDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工单名称" align="center" prop="workorderName"/>
          <el-table-column label="工单编号" align="center" prop="workorderCode"/>
          <el-table-column label="任务名称" align="center" prop="taskName"/>
          <el-table-column label="任务编号" align="center" prop="taskCode"/>
          <el-table-column label="工艺路线" align="center" prop="routeName"/>
          <el-table-column label="工序名称" align="center" prop="processName"/>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getIssueList"
        />
        <!-- 领料记录明细 -->
        <el-dialog title="领料记录明细" :visible.sync="openIssueInfoDialog" width="1260px" append-to-body>
          <el-form ref="form" :model="issueInfoForm" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="领料单编号" prop="issueCode">
                  <el-input v-model="issueInfoForm.issueCode" placeholder="请输入领料单编号" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="领料单名称" prop="issueName">
                  <el-input v-model="issueInfoForm.issueName" placeholder="请输入领料单名称" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料任务" prop="taskCode">
                  <el-input v-model="issueInfoForm.taskCode" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="领料日期" prop="issueDate">
                  <el-date-picker clearable
                                  v-model="issueInfoForm.issueDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择领料日期" disabled>
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据状态" prop="status">
                  <el-select v-model="issueInfoForm.status" disabled>
                    <el-option
                      v-for="dict in dict.type.mes_order_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="生产工单" prop="workorderCode">
                  <el-input v-model="issueInfoForm.workorderCode" placeholder="请选择生产工单" readonly>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户编号">
                  <el-input v-model="issueInfoForm.clientCode" placeholder="请选择生产工单" readonly>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称">
                  <el-input v-model="issueInfoForm.clientName" placeholder="请选择生产工单" readonly>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="issueInfoForm.remark" type="textarea" placeholder="请输入内容" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider content-position="center">物料信息</el-divider>
          <el-card border shadow="always" class="box-card">
            <el-table v-loading="false" :data="issueInfoForm.wmIssueLineList">
              <el-table-column label="产品物料编码" width="120px" align="center" prop="itemCode"/>
              <el-table-column label="产品物料名称" width="120px" align="center" prop="itemName"
                               :show-overflow-tooltip="true"/>
              <el-table-column label="规格型号" align="center" prop="specification" :show-overflow-tooltip="true"/>
              <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
              <el-table-column label="领料数量" align="center" prop="quantityIssued"/>
              <el-table-column label="批次号" align="center" prop="batchCode"/>
              <el-table-column label="仓库名称" align="center" prop="warehouseName"/>
              <el-table-column label="库区名称" align="center" prop="locationName"/>
              <el-table-column label="库位名称" align="center" prop="areaName"/>
              <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            </el-table>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeIssueInfo">取 消</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="退料记录" name="fourth">
        <el-table border v-loading="false" :data="rtIssueList">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column label="退料单编号" align="center" width="150px" prop="rtCode">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleRtIssueView(scope.row)"
                v-hasPermi="['mes:wm:rtissue:query']"
              >{{ scope.row.rtCode }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="退料单名称" align="center" prop="rtName" :show-overflow-tooltip="true"/>
          <el-table-column label="领料日期" align="center" prop="rtDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.rtDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工单名称" align="center" prop="workorderName"/>
          <el-table-column label="工单编号" align="center" prop="workorderCode"/>
          <el-table-column label="任务名称" align="center" prop="taskName"/>
          <el-table-column label="任务编号" align="center" prop="taskCode"/>
          <el-table-column label="工艺路线" align="center" prop="routeName"/>
          <el-table-column label="工序名称" align="center" prop="processName"/>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getRtIssueList"
        />
        <!-- 退料记录明细 -->
        <el-dialog title="退料记录明细" :visible.sync="openRtIssueInfoDialog" width="1260px" append-to-body>
          <el-form ref="form" :model="rtIssueInfoForm" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="退料单编号" prop="rtCode">
                  <el-input v-model="rtIssueInfoForm.rtCode" placeholder="请输入领料单编号" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="退料单名称" prop="rtName">
                  <el-input v-model="rtIssueInfoForm.rtName" placeholder="请输入领料单名称" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生产工单" prop="workorderCode">
                  <el-input v-model="rtIssueInfoForm.workorderCode" placeholder="请选择生产工单" readonly>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="退料任务" prop="taskCode">
                  <el-input v-model="rtIssueInfoForm.taskCode" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="退料日期" prop="rtDate">
                  <el-date-picker clearable
                                  v-model="rtIssueInfoForm.rtDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择领料日期" disabled style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据状态" prop="status">
                  <el-select v-model="rtIssueInfoForm.status" disabled style="width: 100%">
                    <el-option
                      v-for="dict in dict.type.mes_order_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="rtIssueInfoForm.remark" type="textarea" placeholder="请输入内容" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider content-position="center">物料信息</el-divider>
          <el-card border shadow="always" class="box-card">
            <el-table v-loading="false" :data="rtIssueInfoForm.wmRtIssueLineList">
              <el-table-column label="产品物料编码" width="120px" align="center" prop="itemCode"/>
              <el-table-column label="产品物料名称" width="120px" align="center" prop="itemName"
                               :show-overflow-tooltip="true"/>
              <el-table-column label="规格型号" align="center" prop="specification" :show-overflow-tooltip="true"/>
              <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
              <el-table-column label="退料数量" align="center" prop="quantityRt"/>
              <el-table-column label="批次号" align="center" prop="batchCode"/>
              <el-table-column label="接收仓库名称" align="center" prop="warehouseName"/>
              <el-table-column label="接收库区名称" align="center" prop="locationName"/>
              <el-table-column label="接收库位名称" align="center" prop="areaName"/>
              <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            </el-table>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeRtIssueInfo">取 消</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="报工记录" name="fifth">
        <el-table
          v-loading="false"
          :data="feedbackList"
        >
          <el-table-column label="报工类型" align="center" prop="feedbackType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.mes_feedback_type"
                :value="scope.row.feedbackType"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="工作站"
            width="120px"
            align="center"
            prop="workstationName"
          />
          <el-table-column
            label="生产工单编号"
            width="150px"
            align="center"
            prop="workorderCode"
          />
          <el-table-column
            label="产品物料编码"
            width="120px"
            align="center"
            prop="itemCode"
          />
          <el-table-column
            label="产品物料名称"
            width="150px"
            align="center"
            prop="itemName"
          />
          <el-table-column label="规格型号" align="center" prop="specification"/>
          <el-table-column
            label="报工数量"
            align="center"
            prop="quantityFeedback"
          />
          <el-table-column label="报工人" align="center" prop="nickName"/>
          <el-table-column
            label="报工时间"
            align="center"
            prop="feedbackTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.feedbackTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核人" align="center" prop="recordNick"/>
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.mes_order_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getProFeedbackList"
        />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import { getTaskInfo } from "@/api/mes/pro/protask";
import { listFeedback } from '@/api/mes/pro/feedback';
import { listWorkorderbomWithNum } from '@/api/mes/pro/workorderbom';
import { genCode } from "@/api/system/autocode/rule"
import { addIssue, getIssueheader, getIssueList } from "@/api/mes/wm/issueheader.js"
import { addRtissueHeader, getRtissue, listRtissueByTaskId } from "@/api/mes/wm/rtissue"
import ItemSelectLine from "@/views/mes/pro/task/itemSelectLine.vue";
import Rtissueline from "@/views/mes/pro/task/rtIssueLine.vue";

export default {
  name: 'taskInfo',
  components: {Rtissueline, ItemSelectLine},
  dicts: ["mes_order_status", "mes_feedback_type", "mes_order_status"],
  data() {
    return {
      issueAutoGenFlag: false,
      rtIssueAutoGenFlag: false,
      openItemDialog: false,
      openIssueInfoDialog: false,
      openRtIssueDialog: false,
      openRtIssueInfoDialog:false,
      activeName: 'first',
      tabIndex: 0,
      taskInfo: {},
      workorderInfo: {},
      feedbackList: [],
      workorderItemList: [],
      issuelineList: [],
      issueheaderList: [],
      rtIssueList:[],
      rtIssueLineList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        workorderId: null
      },
      issueForm: {},
      issueInfoForm: {},
      rtIssueInfoForm:{},
      // 表单校验
      issueFormRules: {
        issueCode: [
          {required: true, message: "领料单编号不能为空", trigger: "blur"}
        ],
        issueName: [
          {required: true, message: "领料单名称不能为空", trigger: "blur"}
        ],
        issueDate: [
          {required: true, message: "请指定领出日期", trigger: "blur"}
        ],
        workorderCode: [
          {required: true, message: "请指定生产工单", trigger: "blur"}
        ]
      },
      rtIssueForm: {},
      rtIssueFormRules: {
        rtCode: [
          {required: true, message: "退料单编号不能为空", trigger: "blur"}
        ],
        workorderCode: [
          {required: true, message: "请选择要退料的生产工单", trigger: "blur"}
        ]
      }
    }
  },
  activated() {
    this.getInfo(this.$route.query.taskId);
    this.queryParams.taskId = this.$route.query.taskId;
    this.activeName = 'first';
    this.tabIndex = 0;
  },
  methods: {
    getInfo(taskId) {
      getTaskInfo(taskId).then(response => {
        if (response.code == 200 && response.data) {
          this.taskInfo = response.data.taskInfo;
          this.title = this.taskInfo.taskName + '&emsp;&emsp;&emsp;' + this.taskInfo.taskCode;
          this.workorderInfo = response.data.workorderInfo;
        }
      })
    },
    handleClick(tab, event) {
      this.tabIndex = tab.index;
      if (tab.index == 1) {
        //获取物料清单
        this.queryParams.workorderId = this.workorderInfo.workorderId;
        this.queryParams.pageNum = 1;
        this.getItemList();
      } else if (tab.index == 2) {
        this.queryParams.taskId = this.taskInfo.taskId;
        this.queryParams.pageNum = 1;
        this.getIssueList();
      } else if (tab.index == 3) {
        this.queryParams.taskId = this.taskInfo.taskId;
        this.queryParams.pageNum = 1;
        this.getRtIssueList();
      } else if (tab.index == 4) {
        this.getProFeedbackList();
      }
    },
    getProFeedbackList() {
      listFeedback(this.queryParams).then(response => {
        if (response.code == 200 && response.rows) {
          this.feedbackList = [];
          this.feedbackList = response.rows;
          this.total = response.total;
        }
      })
    },
    getItemList() {
      listWorkorderbomWithNum(this.queryParams).then(response => {
        if (response.code == 200 && response.rows) {
          this.workorderItemList = [];
          this.workorderItemList = response.rows;
          this.total = response.total;
        }
      })
    },
    // 多选框选中数据
    handleItemSelectionChange(selection) {
      this.issuelineList = [];
      this.rtIssueLineList = [];
      if (selection.length > 0) {
        selection.forEach(item => {
          const issueLine = {
            lineId: null,
            issueId: null,
            materialStockId: null,
            itemId: item.itemId,
            itemCode: item.itemCode,
            itemName: item.itemName,
            specification: item.itemSpc,
            unitOfMeasure: item.unitOfMeasure,
            quantityIssued: 0,
            batchCode: null,
            warehouseId: null,
            warehouseCode: null,
            warehouseName: null,
            locationId: null,
            locationCode: null,
            locationName: null,
            areaId: null,
            areaCode: null,
            areaName: null
          }
          this.issuelineList.push(issueLine);
          const rtIssueLine = {
            lineId: null,
            rtId: null,
            materialStockId: null,
            itemId: item.itemId,
            itemCode: item.itemCode,
            itemName: item.itemName,
            specification: item.itemSpc,
            unitOfMeasure: item.unitOfMeasure,
            quantityRt: item.llNum,
            batchCode: null,
            warehouseId: null,
            warehouseCode: null,
            warehouseName: null,
            locationId: null,
            locationCode: null,
            locationName: null,
            areaId: null,
            areaCode: null,
            areaName: null
          }
          this.rtIssueLineList.push(rtIssueLine);
        })
      }
    },
    //领料出库方法
    handleItemIssueOut() {
      if (this.issuelineList.length <= 0) {
        this.$modal.msgError("请选择要领用的物料!")
        return;
      }
      this.openItemDialog = true;
      this.issueReset();
    },
    issueReset() {
      this.issueForm = {
        issueId: null,
        issueCode: '',
        issueName: '',
        workstationId: this.taskInfo.workstationId,
        workstationCode: this.taskInfo.workstationCode,
        workstationName: this.taskInfo.workstationName,
        workorderId: this.workorderInfo.workorderId,
        workorderCode: this.workorderInfo.workorderCode,
        taskId: this.taskInfo.taskId,
        taskCode: this.taskInfo.taskCode,
        clientId: this.workorderInfo.clientId,
        clientCode: this.workorderInfo.clientCode,
        clientName: this.workorderInfo.clientName,
        clientNick: this.workorderInfo.clientNick,
        issueDate: '',
        status: 'PREPARE',
        remark: null
      };
      this.issueAutoGenFlag = false;
      this.resetForm("issueForm");
    },
    cancelIssue() {
      this.issuelineList = [];
      this.getItemList();
      this.openItemDialog = false;
      this.issueReset();
    },
    submitIssueForm() {
      this.$refs["issueForm"].validate(valid => {
        if (valid) {
          for (let i = 0; i < this.issuelineList.length; i++) {
            const item = this.issuelineList[i];
            if (item.quantityIssued <= 0) {
              this.$modal.msgError("物料【" + item.itemName + "】的领料数量必须大于0!");
              return;
            }
            if (!item.batchCode) {
              this.$modal.msgError("物料【" + item.itemName + "】的批次号不能为空");
              return;
            }
          }
          this.issueForm.wmIssueLineList = this.issuelineList;
          addIssue(this.issueForm).then(response => {
            if (response.code == 200) {
              this.$modal.msgSuccess("领料成功!")
              this.issuelineList = [];
              this.getItemList();
              this.issueReset();
              this.openItemDialog = false;
            }
          })
        }
      });

    },
    //自动生成编码
    handleAutoGenChangeIssue(issueAutoGenFlag) {
      if (issueAutoGenFlag) {
        genCode('ISSUE_CODE').then(response => {
          this.issueForm.issueCode = response;
        });
      } else {
        this.issueForm.issueCode = null;
      }
    },
    //领料记录
    getIssueList() {
      getIssueList(this.queryParams).then(response => {
        if (response.code == 200) {
          this.issueheaderList = response.rows;
          this.total = response.total;
        }
      })
    },
    handleView(row) {
      this.openIssueInfoDialog = true;
      getIssueheader(row.issueId).then(response => {
        if (response.code == 200 && response.data) {
          this.issueInfoForm = response.data;
        }
      })
    },
    closeIssueInfo() {
      this.openIssueInfoDialog = false;
    },
    //退料入库方法
    handleRtIssueIn() {
      if (this.issuelineList.length <= 0) {
        this.$modal.msgError("请选择要退还的物料!")
        return;
      }
      this.openRtIssueDialog = true;
      this.rtIssueReset();
    },
    rtIssueReset() {
      this.rtIssueForm = {
        rtId: null,
        rtCode: null,
        rtName: null,
        workorderId: this.workorderInfo.workorderId,
        workorderCode: this.workorderInfo.workorderCode,
        taskId: this.taskInfo.taskId,
        taskCode: this.taskInfo.taskCode,
        warehouseId: null,
        warehouseCode: null,
        warehouseName: null,
        locationId: null,
        locationCode: null,
        locationName: null,
        areaId: null,
        areaCode: null,
        areaName: null,
        rtDate: new Date(),
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.rtIssueAutoGenFlag = false;
      this.resetForm("rtIssueForm");
    },
    handleRtIssueAutoGenChange(rtIssueAutoGenFlag) {
      if (rtIssueAutoGenFlag) {
        genCode('RTISSUE_CODE').then(response => {
          this.rtIssueForm.rtCode = response;
        });
      } else {
        this.rtIssueForm.rtCode = null;
      }
    },
    rtIssueCancel() {
      this.rtIssueLineList = [];
      this.getItemList();
      this.openRtIssueDialog = false;
      this.rtIssueReset();
    },
    rtIssueSubmitForm() {
      this.$refs["rtIssueForm"].validate(valid => {
        if (valid) {
          for (let i; i < this.rtIssueLineList.length; i++) {
            const item = this.rtIssueLineList[i];
            if (!item.batchCode) {
              this.$modal.msgError("物料【" + item.itemName + "】的批次号不能为空");
              return;
            }
            if (item.quantityRt <= 0) {
              this.$modal.msgError("物料【" + item.itemName + "】的退料数量必须大于0!");
              return;
            }
            if (item.quantityRt > item.quantityMax) {
              this.$modal.msgError("物料【" + item.itemName + "】的退料数量不能大于领料数量!");
              return;
            }
          }
          this.rtIssueForm.wmRtIssueLineList = this.rtIssueLineList;
          addRtissueHeader(this.rtIssueForm).then(response => {
            if (response.code == 200) {
              this.$modal.msgSuccess("退料成功!")
              this.rtIssueLineList = [];
              this.getItemList();
              this.rtIssueReset();
              this.openRtIssueDialog = false;
            }
          })
        }
      })
    },
    getRtIssueList(){
      listRtissueByTaskId(this.queryParams).then(response=>{
        if(response.code==200){
          this.rtIssueList = response.rows;
          this.total = response.total;
        }
      })
    },
    handleRtIssueView(row){
      this.openRtIssueInfoDialog=true;
      getRtissue(row.rtId).then(response=>{
        if(response.code==200 && response.data){
          this.rtIssueInfoForm=response.data;
        }
      })
    },
    closeRtIssueInfo(){
      this.openRtIssueInfoDialog=false;
    }

  }
}
</script>
<style>
.el-descriptions-item__content {
  width: 90%;
}

.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.work-info {
  margin: 20px;
}

.info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-item {
  width: 40%; /* Adjust width as needed */
  margin-bottom: 10px;
}

.info-item span {
  margin-left: 10px;
}

.info-item span:first-child {
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 20px;
  display: inline-block;
  width: 90px;
}

.content {
  color: #8c8c8c;
  text-align: left;
}
</style>

